<template>
  <div class="systemBrand components-container">
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-row>
      <el-col :span="20">
        <el-form-item label="汽车品牌">
          <el-input v-model.trim="formInline.brandName" :clearable="true" placeholder="请输入汽车品牌" :maxlength="30"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryBrandName" size="medium" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="4" style="text-align:right;"><el-button type="primary" size="medium" icon="el-icon-plus" @click="addBrandDialog()" v-show="showAddOrUpdate('新增')">新增</el-button></el-col>
    </el-row>
  </el-form>

      <template>
        <el-table
        v-loading="loading"
        class="brandTable"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="brandName"
            align="center"
            label="汽车品牌">
          </el-table-column>
          <el-table-column
            prop="number"
            label="型号规格数量"
            align="center"
            >
            <template slot-scope="scope">
            <a style="color:#409EFF" @click="handleNumber(scope.row)">{{scope.row.number}}</a>
            </template>
          </el-table-column>
          <el-table-column
            prop="updatedOn"
            align="center"
            label="修改时间">
          </el-table-column>
          <el-table-column
          label="操作"
          align="center"

          width="80">
          <template slot-scope="scope" >
            <el-tooltip content="修改" placement="top" v-show="showAddOrUpdate('修改')">
            <a @click="handleEdit(scope.$index, scope.row)">
              <i class="el-icon-edit-outline"></i>
            </a>
          </el-tooltip>
          </template>
        </el-table-column>
        </el-table>
      </template>

     <!-- ========页码======-->
    <pages v-on:_pageChange="_pageChange" :total="total"></pages>

      <el-dialog
        title="汽车品牌"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose" :close-on-click-modal="false">
        <el-form label-width="100px" style="margin-left:6px;" :model="brand" :rules="rules" ref="brand">
          <el-form-item label="汽车品牌：" prop="brandName">
            <el-input v-model="brand.brandName" placeholder="请输入汽车品牌" :maxlength="30"></el-input>
          </el-form-item>

          </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBrand()">提 交</el-button>
        </span>
      </el-form>
      </el-dialog>

      <el-dialog
        title="汽车品牌"
        :visible.sync="dialogUpdateVisible"
        width="30%"
        :before-close="handleEditClose" :close-on-click-modal="false">
        <el-form label-width="100px" style="margin-left:6px;" :model="brand" :rules="rules" ref="brand">
          <el-form-item label="汽车品牌：" prop="brandName">
            <el-input v-model="brand.brandName" :maxlength="30"></el-input>
          </el-form-item>

          </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogUpdateVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateBrand()">确 定</el-button>
        </span>
      </el-form>
      </el-dialog>

      <el-dialog
        title="型号规格"
        :visible.sync="modelVisible"
        class="model-dialog"
        width="780px"
        :before-close="modelClose" :close-on-click-modal="false">
        <el-col :span="24" class="main">
        <el-form class="modelTable" label-width="100px" style="margin-left:6px; margin-right:20px;" :model="model" >
          <el-form-item label="汽车品牌：">
            <span v-model="brand.brandName">{{brand.brandName}}</span>
          </el-form-item>
          <el-form-item label="型号规格："  >
            <template >
            <el-table
            v-loading="modelLoading"
            :data="modelData"
            border
            style="width: 100%" >

            <el-table-column
            align="center"
            label="型号规格">
            <template slot-scope="scope">
          <el-input v-show="scope.row.editFlag" size="small" v-model="scope.row.modelName" :maxlength="100"></el-input>
          <span v-show="!scope.row.editFlag">{{ scope.row.modelName }}</span>
        </template>
          </el-table-column>
          <el-table-column
           align="center"

      label="操作"
      width="150">
      <template slot-scope="scope">

        <el-button @click="editModel(scope.row)" type="text" size="small"  v-if="!scope.row.editFlag">编辑</el-button>
        <el-button @click="addModel(scope.row)" type="text" size="small"  v-show="showAdd2(scope.$index)" v-if="!scope.row.editFlag">新增</el-button>
        <el-button @click="editModel(scope.row)" type="button" size="small"  v-else>暂存</el-button>
         <!-- <el-button :type="scope.row.editFlag?'primary':'normal'" @click='editModel(scope.row)' size="small" icon="edit">{{scope.row.editFlag?'暂存':'编辑'}}</el-button>
           -->
      </template>
    </el-table-column>
            </el-table>
            </template>


          </el-form-item>

          </el-form>
        </el-col>
        <span slot="footer" class="dialog-footer">
          <el-button @click="modelVisible = false">取 消</el-button>
        <!--   <el-button type="primary" @click="submitModel()">提 交</el-button> -->
       <!--  <el-popover
         ref="popover5"
         placement="top"
         width="160"
         v-model="visible">
         <p>确定提交？</p>
         <div style="text-align: right; margin: 0">
           <el-button size="mini" type="text" @click="visible = false">取消</el-button>
           <el-button type="primary" size="mini" @click="submitModel()">确定</el-button>
         </div>
         </el-popover>
          <el-button  type="primary" v-popover:popover5>确定</el-button>
          -->
           <el-button type="primary"  @click="submitModel()">确定</el-button>
        </span>
      </el-form>
      </el-dialog>


  </div>
</template>

<script>
    import pages from '../../components/page/page'
    import { findMenu, findSubMenu, findBtn } from '@/utils/btn'
    import * as api from '@/api/system'
    import { mapActions } from 'vuex'
    export default {
      data() {
        return {
          page: {
            index: 1,
            size: 10
          },
          total: 0,
          loading: false,
          modelLoading: false,
          dialogVisible: false,
          dialogUpdateVisible: false,
          modelVisible: false,
          // visible: false,
          formInline: {
            brandName: ''
          },
          brand: {
            id: '',
            brandName: ''
          },
          model: {
            brandId: '',
            id: '',
            modelName: ''
          },
          tableData: [],
          modelData: [],
          rules: {
            brandName: [ { required: true, message: '请填写汽车品牌', trigger: 'blur'}]
          },
        }
      },
      created() {
        this.queryBrandName()
      },
      watch: {
        dialogVisible() {
          if (this.$refs.brand) {
            this.$refs.brand.clearValidate()
          }
        },
        dialogUpdateVisible() {
          if (this.$refs.brand) {
            this.$refs.brand.clearValidate()
          }
        },
        modelVisible() {
          if (this.$refs.model) {
            this.$refs.model.clearValidate()
          }
        }
      },
      components: {
        pages
      },
      methods: {
        showAddOrUpdate(val) {
          let menu = findMenu('系统管理')
          let subMenu = findSubMenu(menu.children, '品牌管理')
          if (findBtn(subMenu.children, val)) {
            return true
          } else {
            return false
          }
        },
         ...mapActions([
          'brandOptions'
         ]),
        addBrandDialog() {
          this.dialogVisible = true
          this.brand.brandName = ''
        },
        submitModel() {
          // this.visible = false
          var model = this.modelData
          var modelArr = []
          var flg = 1
          model.forEach((item,index) => {
            if (item.modelName !== ''){
              if (item.editFlag === 1 || item.editFlag ===true) {
                this.$message({
                  message: `请先暂存型号规格:${item.modelName}再提交`,
                  type: 'warning'
                })
                flg = 0
                return
               } else {
                modelArr.push({ 'brandId': item.brandId, 'id': item.id, 'modelName': item.modelName })
               }
            } else if ((item.modelName === '' && index +1!== model.length) || (item.modelName === '' && index === 0)) {
               this.$message({
                  message: `请完善信息`,
                  type: 'warning'
                })
                flg = 0
                return
            }
          })
          if (flg === 0) {
            return
          } else {
          api.createOrUpdate(modelArr).then((res) => {
            if (+res.code === 0) {
              this.$message({
                message: '提交成功',
                type: 'success',
                showClose: true
              })
              this.modelVisible = false
              this.queryBrandName()
            }
          })
        }
        },
        addModel(row) {
          this.modelData.push({ 'brandId': row.brandId, 'brandName': row.brandName, 'id': 0, 'modelName': '', 'editFlag': 1 })
        },
        showAdd2(index) {
          var rIndex = index + 1
          if (rIndex === this.modelData.length) {
            return true
          }
        },
        editModel(row) {
          if (row.modelName === '') {
            this.$message({
              message: '型号规格不能为空',
              type: 'error',
              showClose: true
            })
            return
          }
          row.editFlag = !row.editFlag
        },
        _pageChange(val, flag) {
          var arr = []
          if (flag === 'size') {
            this.page.index = val
            this.queryBrandName()
          } else {
            arr.push(val)
            this.page.index = 1
            this.page.size = arr[0]
            this.queryBrandName()
          }
        },
        queryBrandName() {
          this.loading = true
          var pages = {
            index: this.page.index,
            size: this.page.size
          }
          if (this.formInline.brandName === '') {
            api.brandPageList(pages).then((res) => {
              if (+res.code === 0) {
                this.tableData = res.data.rows
                this.total = +res.data.total
              }
              this.loading = false
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          } else {
            var data = Object.assign(this.formInline, pages)
            api.brandPageList(data).then((res) => {
              if (+res.code === 0) {
                this.tableData = res.data.rows
                this.total = +res.data.total
              }
              this.loading = false
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          }
        },
        addBrand() {
          var data = this.brand
          if (data.brandName === '') {
            this.$message({
              message: '品牌名称不能为空',
              type: 'error'
            })
          }
          api.brandAdd(data.brandName).then((res) => {
            if (+res.code === 0) {
              this.$message({
                message: '新增成功',
                type: 'success',
                showClose: true
              })
              this.dialogVisible = false
              this.brandOptions()
              this.queryBrandName()
              this.$store.dispatch('brandOptions')
            }
          })
        },
        updateBrand() {
          var data = this.brand
          if (data.brandName === '') {
            this.$message({
              message: '品牌名称不能为空',
              type: 'error'
            })
          }
          api.brandUpdate(data.id, data.brandName).then((res) => {
            if (+res.code === 0) {
              this.$message({
                message: '修改成功',
                type: 'success',
                showClose: true
              })
              this.dialogUpdateVisible = false
              this.queryBrandName()
              this.$store.dispatch('brandOptions')
            }
          })
        },
        handleNumber(row) {
          this.modelLoading = true
          this.modelData = []
          var brandId = row.id
          this.modelVisible = true
          this.brand.brandName = row.brandName
          this.brand.id = brandId
          api.modelPageListById(brandId).then((res) => {
            if (+res.code === 0) {
              var model = res.data.rows
              // var editObj = { eidtFlag: 0 }
              model.forEach((item) => {
                item = Object.assign({}, item, { 'editFlag': 0 })
                this.modelData.push(item)
              })
              this.modelData.push({ 'brandId': this.brand.id, 'brandName': this.brand.brandName, 'id': 0, 'modelName': '', 'editFlag': 1 })
            }
            this.modelLoading = false
          }).catch(err => {
              console.log(err)
              this.modelLoading = false
            })
        },
        handleClose(done) {
          this.dialogVisible = false
        },
        handleEditClose(done) {
          this.dialogUpdateVisible = false
        },
        modelClose(done) {
          this.modelVisible = false
        },
        handleEdit(index, row) {
          this.dialogUpdateVisible = true
          this.brand.brandName = row.brandName
          this.brand.id = row.id
        }
      }
    }
  </script>
<style  lang="scss">
  .systemBrand {
      position: relative;
      padding: 20px;
       .modelTable .el-form-item__label:before {
          content: '* ';
          color: red;
        }
         .el-dialog {
          .main {
          max-height: 450px;
          overflow-y: auto;
          margin-bottom: 20px;
          .el-form {
      max-height: 580px;
    }
    .el-dialog__body{
      padding:0px !important;
    }
    .el-select {
      width: 100%;
    }
        }


    }/*
      .el-dialog {
        min-width: 450px;
        .main {
          max-height: 450px;
          overflow-y: auto;
          margin-bottom: 20px;
        }
      } */
    }

  .components-container {
    position: relative;
    height: 89vh;
    overflow: auto;
  }

  .left-container {
    background-color: #F38181;
    height: 100%;
  }

  .right-container {
    background-color: #FCE38A;
    height: 200px;
  }

  .top-container {
    background-color: #FCE38A;
    width: 100%;
    height: 100%;
  }

  .bottom-container {
    width: 100%;
    background-color: #95E1D3;
    height: 100%;
  }
</style>
